<template>
  <div class="personal">
    <el-tabs type="border-card" v-model="activeTab" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="info">
        <ul>
          <li class="info">
            <span class="Asg">注册时间:</span>
            <el-input v-model="user.createTime" :disabled="isdisabled"></el-input>
          </li>
          <li class="info">
            <span class="Asg">用户名:</span>
            <el-input v-model="user.userName" :disabled="isdisabled"></el-input>
          </li>
          <li class="info">
            <span class="Asg">密码:</span>
            <el-input v-model="user.userPassword"></el-input>
          </li>
          <li class="info">
            <span class="Asg">身份证:</span>
            <el-input v-model="user.idcard"></el-input>
          </li>
          <li class="info">
            <span class="Asg">手机号码:</span>
            <el-input v-model="user.userPhone"></el-input>
          </li>
          <li class="info">
            <span class="Asg">邮箱:</span>
            <el-input v-model="user.userEmail"></el-input>
          </li>
          <li class="info">
            <span class="Asg">性别</span>
            <el-radio v-model="user.userSex" :label="1">哥哥</el-radio>
            <el-radio v-model="user.userSex" :label="2">妹妹</el-radio>
          </li>
          <li class="info">
            <span class="Asg">城市:</span>
            <el-input v-model="user.userCity"></el-input>
          </li>

          <!-- <li class="info">
             <span class="Asg">生日:</span>
             <div class="block">
               <el-date-picker
                 v-model="user.birthday"
                 align="right"
                 type="date"
                 :picker-options="pickerOptions"
                 :size="large"
                 :clearable="false">
               </el-date-picker>
               </div>
           </li>
          <li class="info">
            <span class="Asg">是否婚配</span>
            <el-radio v-model="user.ifmarriage" :label="1">未婚</el-radio>
            <el-radio v-model="user.ifmarriage" :label="2">已婚</el-radio>
          </li>
          <li class="info">
            <span class="Asg">qq:</span>
            <el-input v-model="user.qq"></el-input>
          </li>
          <li class="info">
            <span class="Asg">微信:</span>
            <el-input v-model="user.weixin"></el-input>
          </li>
          <li class="info">
            <span class="Asg">省份:</span>
            <el-input v-model="user.province"></el-input>
          </li>
          <li class="info">
            <span class="Asg">地址:</span>
            <el-input v-model="user.address"></el-input>
          </li> -->
          <li class="button">
            <el-button type="warning" @click.native="update()">更新</el-button>
          </li>
        </ul>
      </el-tab-pane>

      <el-tab-pane label="其他" name="second">其他</el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import {updateUser} from '../../api/personal.js'
import {setUser} from '../../utils/auth.js'
export default {
  data () {
    return {
      isdisabled: true,
      activeTab: 'info',
      user: {
        userName: '',
        userPassword: '',
        userPhone: '',
        userEmail: '',
        userSex: '0',
        userCity: ''
      }
    }
  },
  methods: {
    // 选项卡拦截
    handleClick (tab, event) {
      if (tab.name == 'info') {
        this.getUserInfo()
      }
    },
    getUserInfo () {
      this.user = this.$store.getters.user
    },
    // 修改个人信息
    update () {
      updateUser(this.user).then(res => {
        this.$store.dispatch('UpdateUser', this.user) //设置用户信息;
        this.getUserInfo()
        this.$message.success('更新信息成功')
      })
    }
  },
  created () {
    this.getUserInfo()
  }
}
</script>
<style scoped="scoped">
  .personal{
    width: 100%;
    border: 1px solid transparent;\
    height: 100%;
  }
  .el-tabs{
    width: 70%;
    /* margin: 30px auto; */
    height: 100%;
    margin: 10px auto;
  }
  li{
    list-style: none;
    width: 100%;
    height: 100%;
  }
  .info{
    margin-bottom: 15px;
  }
  .info span{
    display: block;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 5px;
  }
</style>
